@import "commonvars";

.scastie {
  .CodeMirror-cursor {
    border-left-width: 2px;
  }

  .CodeMirror, .CodeMirror-scroll {
    height: 100%;
  }

  .CodeMirror-simplescroll-vertical {
    width: 12px;
    margin-right: 2px;
  }

  .CodeMirror-simplescroll-horizontal {
    height: 12px;
    margin-bottom: 2px;
  }

  .CodeMirror-simplescroll-vertical,
  .CodeMirror-simplescroll-horizontal { 
    background-color: transparent;
    div {
      border: none;
    }
  }

  .CodeMirror-scroll {
    overflow: auto;
  }

  $margin: 24px;
  .CodeMirror-lines {
    line-height: initial;
    padding: $margin;
    .cm-tab {
      visibility: hidden;
    }
  }
  .CodeMirror-linenumber{
    margin-left: -$margin;
  }
  .CodeMirror-linewidget .line,
  .CodeMirror-linewidget .compilation-info,
  .CodeMirror-linewidget .runtime-error,
  .CodeMirror-widget .fold {
    margin-left: -($margin + 4px);
    width: 120%;

    padding: $margin;
    white-space: pre-wrap;

    p {
      display: inline-block;
    }

    p, pre, h1, h2, h3, h4, h5, h6 {
      padding: 0;
      margin: 0;
    }

    ul, ol {
      margin: 0
    }

    .short {
      padding: 1px 5px 1px 5px;
    }
    .block {
      display: block;
    }

    pre {
      width: 100vw;
      white-space: pre-wrap;
      padding: 10px 0px 10px $margin/2;
      display: inline-block;
    }
  }

  .CodeMirror-widget .fold.code-fold {
    cursor: pointer;
  }

  .CodeMirror {
    font-family: $code-font-family;
    
    // emphasis on not parsed (){}
    .CodeMirror-code > pre > span,
    .CodeMirror-code > div > pre > span,
    .CodeMirror-linewidget pre {
      font-weight: bold;
      & > * {
        font-weight: normal;
      }
    }

    .CodeMirror-linewidget {
      overflow: visible !important;

      .runtime-error i,
      .compilation-info.error i {
        color: red;
      }
      .runtime-error,
      .compilation-info {
        &.warning i {
          color: yellow;
        }

        @keyframes blinker {
          50% { opacity: 0; }
        }

        pre {
          padding-top: 0;
        }
        i, pre {
          display: inline-block;
        }
        i {
          vertical-align: top;
          font-size: 20px;
        }

        
      }

      .inline {
        border-radius: 2px;
        position: absolute;
        bottom: 0;
        overflow: hidden;
        margin-left: 20px;
        padding-left: 5px;
      }

      i {
        margin-left: 16px;
        margin-right: 6px;
        font-size: 12px;
      }
    }
  }

  .CodeMirror-hints {
    z-index: 10;

    max-height: 50%;
    max-width: 100%;
    border: none;
    margin-left: -$sidebar-width;
    margin-top: -($header-height + $editor-topbar-height);

    .autocomplete {
      line-height: initial;
      display: inline-table;
      max-width: none;
      width: 100%;
      resize: none;
      .name {
        display: table-cell;
        max-width: none;
        width: 20%;
      }
      .signature {
        display: table-cell;
        max-width: 0;
        width: 60%;
        text-align: left;
        padding-left: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .result-type {
        display: table-cell;
        max-width: 0;
        width: 20%;
        text-align: right;
        padding-left: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .CodeMirror-hints.presentation-mode {
    margin-left: 0;
    margin-top: -$editor-topbar-height;
  }

  .CodeMirror-gutters {
    white-space: nowrap;
  }
  .CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    text-align: right;
    white-space: nowrap;
  }

  .CodeMirror-hover-tooltip {
    border: 1px solid black;
    border-radius: 2px 2px 2px 2px;
    font-family: $code-font-family;
    font-size: 10pt;
    overflow: hidden;
    padding: 2px 5px;
    position: fixed;
    z-index: 100;
    max-width: 600px;
    opacity: 0;
    transition: opacity .4s;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    -ms-transition: opacity .4s;
    background-color: #0f262f;
    color: #dfdfdf;
  }

  .loading-message {
    margin-top: 0px;
    margin-left: 25px;
    transition: opacity .6s;
    -moz-transition: opacity .6s;
    -webkit-transition: opacity .6s;
    -o-transition: opacity .6s;
    -ms-transition: opacity .6s;
  }
}